<template>
	<view>
		<view v-for="(item,index) in list">
			<view class="cate-item">
				<view class="picture">
					<u--image :showLoading="true" :src="item.src" width="100%" height="360rpx" radius="10" @click="click"></u--image>
				</view>
				<view class="title">{{item.title}}</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					url: "/pages/find/index",
					src: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
					title: "软件游戏"
				},
				{
					url: "/pages/find/index",
					src: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
					title: "高清壁纸"
				},
				{
					url: "/pages/find/index",
					src: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
					title: "视频教程"
				},
				{
					url: "/pages/find/index",
					src: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
					title: "软件游戏"
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.cate-item {
		// background-color: black;
		margin: 15px;
		height: 360rpx;
		border-radius: 16rpx;
		position: relative;

		.picture {
			width: 100%;
			height: 100%;
			// background-color: #333;
			
		}

		.title {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			width: 100%;
			background-color: rgba(0,0,0,.5);
			border-radius: 0 0 10rpx 10rpx;
color: #fff;
		}
	}
</style>
